<template>
  <div class="index box clmstart">
    <div class="indexcontainer">
      <!-- 消息通知 -->
      <van-notice-bar color="#000000" background="#fbce07" left-icon="volume-o"
        text="打卡活动将于2024年9月30日24点结束，积分商城将于2024年10月10日24点关闭，请还未消耗的用户尽快在有效期内进行换购。" />
      <!-- logo -->
      <header class="header">
        <img src="@/assets/img/index/header.jpg" class="headerimg" />
        <div class="headercontain clmstart">
          <div class="logobox">
            <img src="@/assets/img/logo.png" />
            <img src="@/assets/img/logo2.png" />
          </div>
          <img src="@/assets/img/index/slogan.png" class="slogan" />
          <div class="ctitlebox">
            <img src="@/assets/img/index/ctitle.png" class="ctitle" />
          </div>
        </div>
      </header>
      <!-- 内容区 -->
      <div class="container clmstart">
        <!-- 门店列表 -->
        <div class="cardbox clmstart">
          <div class="refresh" @click="getLocation"></div>
          <div class="cardinfo">
            <div class="list">
              <div class="th item">
                <div class="storeno">序号</div>
                <div class="storeaddr">打卡地点</div>
                <div class="storedistance">距离</div>
                <div class="point">打卡</div>
              </div>
              <van-list v-model="storeloading" :finished="finished" finished-text="没有更多了">
                <div v-for="(item, index) in storelist" :key="index">
                  <div class="tb item">
                    <div class="storeno">
                      <p class="nowrap">{{ index + 1 }}</p>
                    </div>
                    <div class="storeaddr">{{ item.city }}:{{ item.name }}</div>
                    <div class="storedistance">
                      {{ item.distance.toFixed(1) }}KM
                    </div>
                    <div class="point" @click="
                      toUpload(
                        item.is_sign,
                        item.id,
                        item.distance.toFixed(1),
                        item.type,
                        item.name
                      )
                      ">
                      <span class="pointbtn" :style="{
                        backgroundColor: item.is_sign ? '#626262' : '#db101a',
                      }">
                        {{ item.is_sign ? "已打" : "打卡" }}
                      </span>
                    </div>
                  </div>
                </div>
              </van-list>
            </div>
            <div class="scrolltips">
              <p class="jt">>></p>
              <p>向下滑动查看更多</p>
            </div>
          </div>
        </div>
        <!-- 查看更多门店 -->
        <div class="tocardlist" @click="toNext('addrlist')">
          <img src="@/assets/img/index/tocardlist.png" />
        </div>
        <!-- 查看更多景点 -->
        <div class="tocardlist tosceniclist" @click="toNext('sceniclist')">
          <img src="@/assets/img/index/tosceniclist.png" />
        </div>
        <!-- 奖品 -->
        <img src="@/assets/img/index/prizeimg.png" class="prizeimg" />
        <!-- 答题 -->
        <div class="indexbtnbox clmcenter">
          <div class="btn clmcenter joinbtn btnani" @click="toNext('ques')">
            <img src="@/assets/img/index/btn_ques.png" />
          </div>
        </div>
        <!-- 丹尼斯广告 -->
        <img src="https://mahelei.oss-cn-beijing.aliyuncs.com/2024/Advance318/imgs/dainese.jpg" class="dainese"
          @click="openDaineseWxapp" />
      </div>
      <!-- 底部固定按钮 -->
      <footer class="footbox">
        <div class="ftitem clmcenter" @click="toNext('addrlist')">
          <img src="@/assets/img/index/icon1.png" />
          <p>门店打卡</p>
        </div>
        <div class="ftitem clmcenter" @click="toNext('sceniclist')">
          <img src="@/assets/img/index/icon2.png" />
          <p>景点打卡</p>
        </div>
        <div class="ftitem clmcenter" @click="ruleshow = true">
          <img src="@/assets/img/index/icon3.png" />
          <p>打卡规则</p>
        </div>
        <div class="ftitem clmcenter" @click="toNext('ques')">
          <img src="@/assets/img/index/icon4.png" />
          <p>答题得分</p>
        </div>
        <div class="ftitem clmcenter" @click="toNext('mine')">
          <img src="@/assets/img/index/icon5.png" />
          <p>我的信息</p>
        </div>
        <div class="ftitem clmcenter" @click="toNext('store')">
          <img src="@/assets/img/index/icon6.png" />
          <p>我的商城</p>
        </div>
      </footer>
      <!-- 右边固定栏：客服+邀请 -->
      <div class="rightfixedbox">
        <div class="rightfixeditem clmcenter" @click="toCustomer">
          <img src="@/assets/img/index/icon_kefu.png" />
          <img src="@/assets/img/index/icon_kefu_text.png"
            class="kefutext animate__animated animate__jello animate__infinite" />
        </div>
        <div class="rightfixeditem clmcenter" @click="toNext('friends')">
          <img src="@/assets/img/index/icon_yaoqing.png" />
        </div>
      </div>
    </div>
    <Rules v-show="ruleshow" @close="CloseRules" />
  </div>
</template>

<script>
import { Toast } from "vant";
import wx from "weixin-js-sdk";
import Rules from "../components/Rules.vue";
export default {
  data() {
    return {
      finished: false, // 门店列表加载完毕
      // scenicfinished: false, // 景点列表加载完毕
      storelist: [], //门店列表
      // sceniclist: [], //景点列表
      storeloading: false,
      scenicloading: false,
      latitude: null, //当前位置的纬度
      longitude: null, //经度
      ruleshow: false, //规则
      time: "",
      isReg: 0, //用户状态
    };
  },
  created() {
    let intxt = this.$route.query.intxt;
    if (intxt === "back") {
      // 点击返回到首页
      this.latitude = window.localStorage.getItem("latitude");
      this.longitude = window.localStorage.getItem("longitude");
      if (this.latitude == null || this.longitude == null) {
        this.getLocation();
      } else {
        this.getAllStoresDistanceInfo(this.latitude, this.longitude);
      }
    } else {
      this.getLocation();
    }
    this.getUserStatusInfo();
  },
  methods: {
    //获取当前位置的经纬度
    getLocation() {
      //获取当前位置的经纬度
      var url = encodeURIComponent(window.location.href.split("#")[0]);
      this.$http
        .post("https://www.mahelei.com/index.php/Gm/Wechat/share", { url })
        .then((res) => {
          let data = res.data;
          wx.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: ["checkJsApi", "getLocation"],
            success(res) {
              //Toast(res);
            },
          });
        });
      wx.ready(() => {
        wx.checkJsApi({
          jsApiList: ["getLocation"],
          success: (rest) => {
            //获取当前位置
            wx.getLocation({
              type: "gcj02", // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
              success: (res) => {
                let that = this;
                let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                // 持久化存储经纬度
                window.localStorage.setItem("latitude", latitude);
                window.localStorage.setItem("longitude", longitude);
                that.getAllStoresDistanceInfo(latitude, longitude);
                // that.$store.commit("updateLocation", { latitude, longitude });
              },
            });
          },
        });
      });
    },
    //获取门店+景点打卡地距离列表
    getAllStoresDistanceInfo(latitude, longitude) {
      this.$http
        .post("/getAllCheckInStoreAndScenicDistanceInfo", {
          latitude,
          longitude,
        })
        .then((lres) => {
          // console.log(lres);
          if (lres.data.code == 200) {
            this.storelist = JSON.parse(JSON.stringify(lres.data.data.lists));
            // 加载状态结束
            this.storeloading = false;
            // 数据全部加载完成
            if (this.storelist.length >= lres.data.data.lists.length) {
              this.finished = true;
            }
          } else {
            Toast(lres.data.msg);
          }
        })
        .catch((err) => {
          Toast.clear();
          console.log(err);
        });
    },
    //去打卡
    toUpload(isdone, lid, km, type, name) {
      //isdone判断用户是否在当前点已打卡 0表示未打卡 1表示已打卡
      if (km > 1) {
        Toast("超出打卡范围！");
        return;
      }
      if (isdone == 0) {
        //判断用户是否注册
        if (this.isReg == 0) {
          //未注册
          this.$router.replace("/reg");
        } else {
          //已注册
          this.$router.replace({
            name: "upload",
            params: {
              location_id: lid,
              latitude: window.localStorage.getItem("latitude"),
              longitude: window.localStorage.getItem("longitude"),
              type,
              name,
            },
          });
        }
      } else {
        //已打卡
        Toast("您已打卡！");
      }
    },
    // 答题 我的信息
    toNext(urlname) {
      if (this.isReg == 0) {
        // 未注册
        this.$router.replace("/reg");
      } else {
        // if (urlname == "store") {
        //   return Toast("系统维护中...");
        // }
        // 已注册
        this.$router.replace({
          path: `/${urlname}`,
          query: {
            type: `${urlname}`,
          },
        });
      }
    },
    //获取用户状态
    getUserStatusInfo() {
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      this.$http
        .post("/getUserStatusInfo")
        .then((res) => {
          Toast.clear();
          if (res.data.code == 200) {
            this.isReg = res.data.data.isReg;
          } else {
            Toast(res.data.msg);
          }
        })
        .catch((err) => {
          Toast.clear();
          console.log(err);
        });
    },
    //关闭规则弹窗
    CloseRules(isflag) {
      if (isflag) {
        this.ruleshow = false;
      }
    },
    // 客服
    toCustomer() {
      wx.miniProgram.navigateTo({
        url: `/pages/service/service`,
      });
    },
    // 跳转小程序
    openDaineseWxapp() {
      wx.miniProgram.navigateTo({
        url: `/pages/openwxapp/openwxapp`,
      });
    },
  },
  components: { Rules },
};
</script>

<style lang="less" scoped>
.index {
  background-color: #a0bec7;
  overflow-y: scroll;

  img {
    display: block;
  }

  .indexcontainer {
    position: relative;
    width: 100%;
    height: auto;

    header {
      position: relative;
      width: 100%;
      height: 810px;
      overflow: hidden;

      .headerimg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }

      .headercontain {
        position: relative;
        width: 100%;
        z-index: 2;

        .slogan {
          margin-top: 2rem;
        }

        .ctitlebox {
          position: relative;
          margin-top: 26rem;
          width: 562px;
          overflow: hidden;

          .ctitle {
            width: 100%;
          }
        }
      }
    }

    .container {
      position: relative;
      width: 100%;
      height: auto;
      background: url("@/assets/img/index/indexbg.jpg") no-repeat bottom center;
      background-size: cover;

      .cardbox {
        position: relative;
        width: 100%;
        margin-top: 1rem;

        .refresh {
          position: absolute;
          right: 2.5rem;
          top: 0;
          width: 182px;
          height: 65px;
        }

        .cardinfo {
          width: 722px;
          height: 694px;
          background: url("@/assets/img/index/cardbox.png") no-repeat;
          background-size: 100% 100%;

          .list {
            position: relative;
            width: 645px;
            height: 500px;
            margin: 5.2rem auto 0 auto;
            overflow-y: scroll;

            .item {
              width: 100%;
              height: 78px;
              background: linear-gradient(to left,
                  transparent 0%,
                  transparent 50%,
                  #000 50%,
                  #000 100%) bottom center;
              background-size: 15px 1px;
              background-repeat: repeat-x;
              display: flex;
              align-items: center;

              div {
                text-align: left;
              }

              .storeno {
                width: 13%;
              }

              .storeaddr {
                width: 56%;
              }

              .storedistance {
                width: 18%;
              }

              .point {
                width: 13%;
                text-align: right;
              }
            }

            .th {
              //设置标题吸顶
              position: -webkit-sticky;
              position: sticky;
              top: -1px;
              background-color: #fbce07;

              div {
                font-family: "AlibabaPuHuiTi-2-85-Bold";
                color: #000;
                font-size: 1.8rem;
              }
            }

            .tb {
              div {
                color: #626262;
                font-size: 1.5rem;
              }

              .storeno {
                .nowrap {
                  display: inline-block;
                  min-width: 37px;
                  background: url("@/assets/img/numbg.png") no-repeat center left;
                  background-size: auto 47px;
                  color: #ffffff;
                  line-height: 47px;
                  text-align: center;
                  padding-bottom: 8px;
                }
              }

              .storeaddr {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis; //文字超出部分显示省略号
              }

              .point {
                .pointbtn {
                  color: #ffffff;
                  padding: 0.5rem 0.8rem;
                  border-radius: 2rem;
                }
              }
            }
          }

          .scrolltips {
            width: 100%;

            p {
              font-size: 1.1rem;
              text-align: center;
            }

            .jt {
              animation: tomore 2s linear infinite;
            }

            @keyframes tomore {
              0% {
                transform: rotate(90deg) scale(0.5, 2) translateX(0);
              }

              50% {
                transform: rotate(90deg) scale(0.5, 2) translateX(10px);
              }

              100% {
                transform: rotate(90deg) scale(0.5, 2) translateX(0);
              }
            }
          }
        }
      }

      .tocardlist {
        width: 383px;
        height: 76px;
        overflow: hidden;
        margin: 2rem auto;
        animation: pulse 2s linear infinite;

        img {
          display: block;
          width: 100%;
        }
      }

      .tosceniclist {
        margin-top: 0;
        animation-delay: 0.5s;
      }

      .prizeimg {
        margin-top: 1rem;
      }

      .indexbtnbox {
        position: relative;
        z-index: 2;
        width: 100%;
        margin-top: 4rem;

        .btn {
          width: 380px;
          height: 78px;
          background-size: 100% 100%;

          img {
            width: 100%;
          }
        }

        .minebtn {
          margin-top: 1.5rem;
        }
      }

      .dainese {
        margin: 4rem auto 14rem auto;
      }
    }

    .footbox {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 3;
      width: 100%;
      height: 160px;
      background: #ffd700;
      border-top: 1px solid #e60012;
      box-sizing: border-box;
      display: flex;
      justify-content: space-evenly;
      align-items: flex-start;

      .ftitem {
        margin-top: 1.5rem;
        text-align: center;

        img {
          width: 56px;
        }

        p {
          font-size: 1.5rem;
          padding-top: 0.5rem;
        }
      }
    }
  }

  // 客服+邀请
  .rightfixedbox {
    position: fixed;
    right: 0;
    top: 17rem;
    z-index: 10;
    width: 110px;

    .rightfixeditem {
      position: relative;
      width: 100%;
      margin-top: 1rem;

      img {
        width: 100%;
      }

      .kefutext {
        position: absolute;
        top: -2rem;
        right: 0.8rem;
        width: 60px;
      }
    }
  }
}
</style>

<style lang="less">
.van-loading,
.van-list__error-text,
.van-list__finished-text,
.van-list__loading {
  line-height: 70px !important;
}

.van-loading__text,
.van-list__error-text,
.van-list__finished-text,
.van-list__loading {
  font-size: 1.5rem !important;
}

.van-list__finished-text {
  color: #000 !important;
}

// 消息通知
.van-notice-bar {
  height: 65px !important;
}

.van-notice-bar__left-icon,
.van-notice-bar__right-icon {
  font-size: 32px !important;
  min-width: 40px !important;
}

.van-notice-bar {
  font-size: 28px !important;
  line-height: 48px !important;
}
</style>
